<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col :span="18" class="logo" >
        {{sysName}}
      </el-col>
      <el-col :span="4" class="userinfo">
        <el-dropdown trigger="hover">
          <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>

        </el-dropdown>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <aside style="background-color: white">

      </aside>
      <section class="content-container" style="background-color: white">
        <div class="grid-content bg-purple-light">
          <el-col :span="24" class="breadcrumb-container">
          </el-col>
          <el-col :span="24" class="content-wrapper">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </el-col>
        </div>
      </section>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      sysName:'欢迎注册',
      sysUserName: '',
      sysUserAvatar: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    //退出登录
    logout: function () {
      var _this = this;
      this.$confirm('确认退出吗?', '提示', {
        //type: 'warning'
      }).then(() => {
        sessionStorage.removeItem('user');
        _this.$router.push('/login');
      }).catch(() => {

      });
    }
  },
  mounted() {
    var user = sessionStorage.getItem('user');
    if (user) {
      user = JSON.parse(user);
      this.sysUserName = user.name || '';
      this.sysUserAvatar = user.avatar || '';
    }

  }
}
</script>

<style scoped lang="scss">
@import '../style/vars.scss';

.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}
.header {
  height: 60px;
  line-height: 60px;
  background: $color-primary;
  color:#fff;
  .userinfo {
    text-align: right;
    padding-right: 35px;
    float: right;

  }
  .logo {
    height:60px;
    font-size: 22px;
    padding-left:20px;
    img {
      width: 40px;
      float: left;
      margin: 10px 10px 10px 0px;
    }

  }

  .title{
    font-size: 22px;
    padding-left:20px;
    line-height: 60px;
    color:#fff;
  }
}
.main {
  display: flex;
  position: absolute;
  top: 60px;
  bottom: 0px;
  overflow: hidden;
  aside {
    flex:0 0 230px;
    width: 230px;
    .el-menu{
      height: 100%;
      /* width: 34%; */
    }
  }
  .content-container {
    flex:1;
    /* overflow-y: scroll; */
    padding: 20px;
    .breadcrumb-container {
      .title {
        width: 200px;
        float: left;
        color: #475669;
      }
      .breadcrumb-inner {
        float: right;
      }
    }
    .content-wrapper {
      background-color: #fff;
      box-sizing: border-box;
    }
  }
}
</style>
